<!--
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-05-26 17:37:47
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-05-27 01:35:08
 * @FilePath: \vue3_nuxt_demo\pages\notebook\write.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="notebook-page-container">
    <!-- 文集部分 -->
    <a-col :span="4" style="height: 100%;">
      <NoteBookPart :node="currentNoteBookNode" :active="currentNoteBook" @check="handleNoteBook" />
    </a-col>
    <!-- 文章部分 -->
    <a-col :span="8" style="height: 100%;">
      <NotePart :noteBookNode="currentNoteBookNode" :node="currentNoteNode" :active="currentNote" @check="handleNote" />
    </a-col>
    <!-- 编辑器部分 -->
    <a-col :span="12" style="height: 100%;">
      <EditorPart :noteBookNode="currentNoteBookNode" :node="currentNoteNode" />
    </a-col>
  </div>
</template>

<script setup>
import NoteBookPart from '~/components/NoteBookPart.vue';
import NotePart from '~/components/NotePart.vue';
import EditorPart from '~/components/EditorPart.vue';

// 当前文集节点
const currentNoteBookNode = reactive({});
// 当前文集索引
const currentNoteBook = ref(0);
// 选中文集
const handleNoteBook = (item, index) => {
  // 节点赋值
  currentNoteBookNode.value = item;
  // 节点索引
  currentNoteBook.value = index;
}


// 当前文章节点
const currentNoteNode = reactive({});
// 当前文章索引
const currentNote = ref(0);
// 选中文章
const handleNote = (item, index) => {
  // 节点赋值
  currentNoteNode.value = item;
  // 节点索引
  currentNote.value = index;
}
</script>

<style lang="less" scoped>
.notebook-page-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
}
</style>